window.addEventListener('DOMContentLoaded', function () {
    // nav制作开始
    var span_one = document.querySelectorAll('.span_one');
    var a1 = document.querySelectorAll('.a1');
    var nav_li_one = document.querySelector('.nav_li_one');
    var box = document.querySelector('.box');
    var nav_li_two = document.querySelector('.nav_li_two');
    var nav_li_three = document.querySelector('.nav_li_three');
    var nav_li_four = document.querySelector('.nav_li_four');
    var nav_li_five = document.querySelector('.nav_li_five');
    var pulldown_two = document.querySelector('.pulldown_two');
    var pulldown_three = document.querySelector('.pulldown_three');
    var pulldown_four = document.querySelector('.pulldown_four');
    var pulldown_five = document.querySelector('.pulldown_five');

    nav_li_one.addEventListener('mouseover', function () {
        box.style.display = 'block';
    })
    nav_li_one.addEventListener('mouseout', function () {
        box.style.display = 'none';
    })
    nav_li_two.addEventListener('mouseover', function () {
        pulldown_two.style.display = 'block';
    })
    nav_li_two.addEventListener('mouseout', function () {
        pulldown_two.style.display = 'none';
    })
    nav_li_three.addEventListener('mouseover', function () {
        pulldown_three.style.display = 'block';
    })
    nav_li_three.addEventListener('mouseout', function () {
        pulldown_three.style.display = 'none';
    })
    nav_li_four.addEventListener('mouseover', function () {
        pulldown_four.style.display = 'block';
    })
    nav_li_four.addEventListener('mouseout', function () {
        pulldown_four.style.display = 'none';
    })
    nav_li_five.addEventListener('mouseover', function () {
        pulldown_five.style.display = 'block';
    })
    nav_li_five.addEventListener('mouseout', function () {
        pulldown_five.style.display = 'none';
    })
    a1[0].addEventListener('mouseover', function () {
        span_one[0].className = 'span_one span_one_add'
    })
    a1[0].addEventListener('mouseout', function () {
        span_one[0].className = 'span_one'
    })
    a1[1].addEventListener('mouseover', function () {
        span_one[1].className = 'span_one span_one_add'
    })
    a1[1].addEventListener('mouseout', function () {
        span_one[1].className = 'span_one'
    })
    a1[2].addEventListener('mouseover', function () {
        span_one[2].className = 'span_one span_one_add'
    })
    a1[2].addEventListener('mouseout', function () {
        span_one[2].className = 'span_one'
    })
    a1[3].addEventListener('mouseover', function () {
        span_one[3].className = 'span_one span_one_add'
    })
    a1[3].addEventListener('mouseout', function () {
        span_one[3].className = 'span_one'
    })
    a1[4].addEventListener('mouseover', function () {
        span_one[4].className = 'span_one span_one_add'
    })
    a1[4].addEventListener('mouseout', function () {
        span_one[4].className = 'span_one'
    })
    // nav制作结束
})